<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { new_guide_share_info_api } from "@/package/novice/api/new_guide";
import { AppData } from "@/utils/app";
import { previewImage } from "@/utils/meida";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import SwipeDot from "@/components/swipe/dot.vue";

onLoad((options) => {
  new_guide_share_info_api({ id: options?.id }).then((resp) => {
    infoData.author_avatar = resp.author_avatar;
    infoData.author_name = resp.author_name;
    infoData.title = resp.title;
    infoData.source_content = resp.source_content.replace(
      /\<img/gi,
      '<img class="detail-info-content2" '
    );
    infoData.date = resp.date;

    imgList.value = resp.img_arr;
    if (resp.img_arr.length > 0) {
      const img = resp.img_arr[0] as any;
      imgHeight.value = (img.height / img.width) * AppData.rectData.windowWidth;
    }
  });

  tempData.id = options?.id;
});

const infoData = reactive({
  author_avatar: "",
  author_name: "",
  title: "",
  source_content: "",
  date: "",
});

const imgIndex = ref(0);
const imgHeight = ref(500);
const imgList = ref<any[]>([]);
const imgClick = () => {
  previewImage(toRaw(imgList.value), toRaw(imgIndex.value));
};

const tempData = { id: "" };
</script>

<template>
  <NavBack />
  <NavBar background="#ffffff">
    <view class="detail-nav">
      <image
        class="detail-nav-avatar"
        :src="infoData.author_avatar"
        mode="aspectFill"
      />
      <view class="detail-nav-name">{{ infoData.author_name }}</view>
    </view>
  </NavBar>
  <NavSpace />

  <view
    class="detail-ad"
    v-if="imgList.length !== 0"
    :style="{ height: `${imgHeight}px` }"
    @click="imgClick"
  >
    <Swipe
      v-model="imgIndex"
      :listData="imgList"
      labelKey="img_url"
      autoplay
      mode="aspectFit"
    />
    <view class="detail-ad-dot">
      <SwipeDot
        v-model="imgIndex"
        :total="imgList.length"
        color="#ff7900"
        backgroundColor="#dddddd"
      />
    </view>
  </view>

  <view class="detail-info">
    <view class="detail-info-title">{{ infoData.title }}</view>
    <view class="detail-info-content">
      <rich-text :nodes="infoData.source_content" />
    </view>
    <view class="detail-info-date">{{ infoData.date }}</view>
  </view>
</template>

<style lang="scss">
page {
  // padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
  background-color: #ffffff;
}

.detail-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-left: 50px;
  padding-right: 30rpx;

  .detail-nav-avatar {
    flex-shrink: 0;
    width: 60rpx;
    height: 60rpx;
    border-radius: 50%;
  }

  .detail-nav-name {
    min-width: 0;
    margin-left: 10rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.detail-ad {
  position: relative;
  margin-bottom: 18rpx;

  .detail-ad-dot {
    position: absolute;
    left: 50%;
    bottom: -28rpx;
    transform: translateX(-50%);
  }
}

.detail-info {
  padding: 40rpx 0;

  .detail-info-title {
    margin: 0 30rpx 20rpx;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
  }

  .detail-info-content {
    margin: 0 30rpx 18rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 52rpx;
    white-space: pre-line;
  }

  .detail-info-content2 {
    display: block;
    width: 100%;
  }

  .detail-info-date {
    padding-left: 30rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }
}
</style>